<!-- 2017-12-4 14:24:12 | 修改 木遥（微信:  http://marsgis.cn/weixin.html ） -->
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="x5-fullscreen" content="true" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />

    <!-- 标题及搜索关键字 -->
    <meta name="keywords" content="火星科技,cesium,3D,GIS,marsgis,三维,地球,地图,开发,框架,系统,示例,资料,模型,离线,外包,合肥,安徽,中国" />
    <meta
      name="description"
      content="火星科技 合肥火星 合肥火星科技 合肥火星科技有限公司 leaflet leaflet框架 leaflet开发 cesium cesium开发 cesium框架 三维 地球 模型  gis marsgis 地图离线 地图开发 地图框架 地图外包 框架 开发 外包  地图离线 二维地图 三维地图 全景漫游 地理信息系统 云GIS 三维GIS GIS平台 WebGIS"
    />

    <link rel="shortcut icon" type="image/x-icon" href="http://mars3d.cn/favicon.ico" />
    <title>地球自转旋转 | Mars3D | 三维地图 | 火星科技 | 合肥火星科技有限公司</title>

    <script
      type="text/javascript"
      src="../lib/include-lib.js"
      libpath="../lib/"
      include="jquery,font-awesome,bootstrap,layer,haoutil,turf,mars3d"
    ></script>

    <link href="css/style.css" rel="stylesheet" />

    <!--btnbar-->
    <link href="js/btnbar/btnbar.css" rel="stylesheet" />
    <script src="js/btnbar/btnbar.js"></script>
  </head>

  <body class="dark">
    <!--加载前进行操作提示，优化用户体验-->
    <div id="mask" class="signmask" onclick="removeMask()"></div>

    <div id="mars3dContainer" class="mars3d-container"></div>

    <div class="infoview">
      <input id="btnStart" type="button" class="btn btn-primary" value="开始" />
      <input id="btnStop" type="button" class="btn btn-primary" value="停止" />
    </div>

    <div class="infoview infoview-js">
      <div class="infoview_panel">
        <div class="infoview_panel_scroll">
          <div class="title">合肥火星科技有限公司</div>
          <div>
            <label>公司简介:</label
            ><span
              >火星科技创建于2017年8月，立足于科教之城、创新高地安徽合肥，公司致力于GIS地理信息产业和Web可视化技术发展和技术普惠，应用领域包括三维可视化、航天航空、BIM工程、水文气象、仿真推演、国土资源、环境保护、智慧农业、交通物流等。能够在辅助规划决策、管理规划成果数据方面起到重要作用，为多源地理信息的综合研究提供了一个专业性的工具性平台，对于地方部门、相关企业有重要实用价值。自成立以来，火星科技始终背负着“为客户提供更好的服务，为员工搭建广阔的平台，为社会创造更大的价值”的企业使命，坚守着“诚信、专注、品质、创新”的企业核心价值观，严格执行着“勤奋、严谨、求真、务实”的团队作风，最终实现“成为一家受尊敬的创新型科技企业”的企业愿景。</span
            >
          </div>
          <div>
            <label>公司资质:</label
            ><span
              >公司致力于三维可视化技术产业发展，拥有有效软件著作权和专利 20
              多项，国家高新技术企业、“双软”认定企业、合肥市大数据企业、中国软件协会认定的AAA 信用企业、已通过ISO9001质量管理体系认证。</span
            >
          </div>
        </div>
      </div>
    </div>

    <script src="./js/common.js"></script>
    <script type="text/javascript">
      'use script' //开发环境建议开启严格模式

      var map

      function initMap(options) {
        //合并属性参数，可覆盖config.json中的对应配置
        var mapOptions = mars3d.Util.merge(options, {
          scene: {
            center: { lat: 26.520735, lng: 120.914959, alt: 23891502.7, heading: 92.1, pitch: -76.8, roll: 267.9 },
            clock: {
              multiplier: 200, //速度
            },
          },
        })

        //创建三维地球场景
        map = new mars3d.Map('mars3dContainer', mapOptions)

        //按shift键+鼠标左键 拖拽 地球到合适区域，通过下面代码获取视角参数，拷贝到mapOptions的center参数中。
        let center = map.getCameraView({ simplify: false })

        $('#btnStart').click(function () {
          startRotate()
        })

        $('#btnStop').click(function () {
          stopRotate()
        })

        startRotate()

        //加点演示的矢量数据
        addGraphics()

        //下侧的按钮
        btnbar.init([
          {
            name: '公司简介',
            click: function () {
              haoutil.msg('你单击了功能按钮-公司简介')
            },
          },
          {
            name: '公司产品',
            click: function () {
              haoutil.msg('你单击了功能按钮-公司产品')
            },
          },

          {
            name: '公司项目',
            click: function () {
              haoutil.msg('你单击了功能按钮-公司项目')
            },
          },
        ])
      }

      function startRotate() {
        stopRotate()

        previousTime = map.clock.currentTime.secondsOfDay
        map.on(mars3d.EventType.clockTick, map_onClockTick)
      }

      function stopRotate() {
        map.off(mars3d.EventType.clockTick, map_onClockTick)
      }

      var previousTime

      function map_onClockTick(clock) {
        var spinRate = 1

        var currentTime = map.clock.currentTime.secondsOfDay
        var delta = (currentTime - previousTime) / 1000
        previousTime = currentTime
        map.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -spinRate * delta)
      }

      function addGraphics() {
        let center = Cesium.Cartesian3.fromDegrees(117.203932, 31.856794, 31.8)
        //公司位置 矢量对象标记
        var lightCone = new mars3d.graphic.LightCone({
          position: center,
          style: {
            color: 'rgba(0,255,255,0.9)',
            radius: 80000, //底部半径
            height: 1000000, //椎体高度
          },
          show: true,
        })
        map.graphicLayer.addGraphic(lightCone)

        var lineMaterial = mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
          image: 'img/textures/lineClr.png',
          color: new Cesium.Color(255 / 255, 201 / 255, 38 / 255, 0.5),
          speed: 9,
        })

        $.getJSON('//data.mars3d.cn/file/geojson/areas/100000_full.json', function (geojson) {
          let arr = mars3d.Util.geoJsonToGraphics(geojson) //解析geojson
          for (let i = 0; i < arr.length; i++) {
            let item = arr[i].attr

            var thisPoint = Cesium.Cartesian3.fromDegrees(item.center[0], item.center[1])
            var positions = mars3d.PolyUtil.getLinkedPointList(center, thisPoint, 40000, 100) //计算曲线点

            var primitive = new mars3d.graphic.PolylinePrimitive({
              positions: positions,
              style: {
                width: 2,
                material: lineMaterial, //动画线材质
              },
              attr: item,
            })
            primitive.bindTooltip(`合肥 - ${item.name}`)
            map.graphicLayer.addGraphic(primitive)
          }
        })
      }
    </script>
  </body>
</html>
